<template>
    <div style="border: 0px solid #bbb; padding-top: 10px;background-color:#f2f5fa;">
        <el-row >
            <el-col  :span="12" v-if="showcontent">
                <el-row class="main" >
                    <el-col  :span="24" >
                        <el-input type="textarea" placeholder="审批意见"  style="width: 100%" v-model="approverecord.FApproverNote" ></el-input>
                    </el-col>
                </el-row>
                <el-row class="main" style="margin-top: 15px;">
                    <el-col  :span="10">
                        <sy-select v-if="shownextapprover" placeholder="下一步审批人" v-model="approverecord.FToApprover"
                                   :optionData="approverlist">
                        </sy-select>
                    </el-col>
                    <el-col  :span="10" style="margin-left: 50px;">
                        <el-button v-if="showback" @click="back">回退</el-button>
                        <el-button type="primary" @click="pass">{{passtext}}</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col  :span="12" >
                    <el-steps style="margin: 30px 0 0 50px" :space="100" :active="approvestep" finish-status="success">
                        <el-step  v-for="item in approvedetailist" :title="item.FStepName"></el-step>
                    </el-steps>

            </el-col>
        </el-row>

        <el-collapse  accordion>
            <el-collapse-item title="审批记录">
                <el-table :data="recordData">
                    <el-table-column prop="FStepName" align="center" label="步骤" width="120">
                    </el-table-column>
                    <el-table-column prop="ApproverName" align="center" header-align="center" label="操作人"  width="150" >
                    </el-table-column>
                    <el-table-column prop="ToApproverName" align="center" header-align="center" label="下一步操作人"  width="150" >
                    </el-table-column>
                    <el-table-column prop="FApproverDate"  :formatter="formatDate2" align="center"  header-align="center" label="操作时间"  width="180" >
                    </el-table-column>
                    <el-table-column prop="FApproverNote" align="center"  header-align="center" label="意见"  width="400" >
                    </el-table-column>
                    <el-table-column prop="FIsPass" align="center" label="通过/退回" width="100">
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import util from '../../common/util'
    import mixin from '../../common/mixin'
    export default {
        mixins: [mixin],
        data() {
            return {
                activeName:"0",
                FToApprover:null,
                FApproverNote:'',
                recordData:[],
                approverlist:[],
                approvedetailist:[],
                approverecord:{},
                approvestep:0,
                showback:false,
                passtext:'',
                shownextapprover:false
            }

            },
        props: {
            showcontent:Boolean
        },
        computed: {

        },
        methods: {
              back(){
                  this.approverecord.FIsPass=0
                  util.post("server/system/Approve.ashx?cmd=ApproveBack",this.approverecord,this.switchLoading,result=> {
                      util.msgSuc("操作成功")
                      this.$emit("onApproveSuc",result.RecordId)
                  })
              },
              pass(){
                  if(!this.approverecord.FToApprover&&this.approverecord.FIsEnd==0) {
                      util.msgWarning("请选择下一步审核人");
                      return;
                  }
                  this.approverecord.FIsPass=1
                  util.post("server/system/Approve.ashx?cmd=ApprovePass",this.approverecord,this.switchLoading,result=> {
                      util.msgSuc("操作成功")
                      this.$emit("onApproveSuc")

                  })
              },
             _init(record,ApproveID){
                 util.get("server/system/Approve.ashx?cmd=GetApproveInfo",
                     {"approveID":ApproveID,"billID":record.FID,"step":record.FApproveStep+1},this.switchLoading,result=>{
                        if(record.FApproveStep==0)
                        {
                            this.showback=false
                            this.passtext='提交'
                        }
                        else
                        {
                            this.showback=true
                            this.passtext='通过'
                        }
                        if(result.nowStep!=null&&result.nowStep.FIsEnd==1)
                        {
                            this.shownextapprover=false
                        }
                        else {
                            this.shownextapprover=true
                        }
                         this.approverlist = result.approver
                         this.recordData = util.date.formatArr(result.approveRecord)
                         this.approvedetailist = result.approveDetail
                         this.approvestep=record.FApproveStep
                         if(result.nowStep)
                         {
                             this.approverecord.FID=0
                             this.approverecord.FApproveID=ApproveID
                             this.approverecord.FStep=result.nowStep.FStep
                             this.approverecord.FStepName = result.nowStep.FStepName
                             this.approverecord.FApprover=''
                             this.approverecord.FToApprover=''
                             this.approverecord.FApproverDate=''
                             this.approverecord.FIsEnd = result.nowStep.FIsEnd
                             this.approverecord.FBillID=record.FID
                             this.approverecord.FIsPass=0
                         }
                         for(let i=0;i<this.recordData.length;i++)
                         {
                             this.recordData[i].FIsPass = this.recordData[i].FIsPass==0?"回退":"通过"
                         }
                     })
             }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .main{
        margin: 10px 20px;
    }
</style>
